import React, {useEffect, useState} from "react";
import {Form, Input, Modal} from "antd";
import _findIndex from 'lodash/findIndex';

const {TextArea} = Input;
const TakeBack = (props) => {
  const {
    form,
    handleChangeProperties,
    selectedModel,
    handleClose,
    titleText,
  } = props;
  const {getFieldDecorator} = form;

  const [nodeConfigVisible, setNodeConfigVisible] = useState(true);

  useEffect(() => {
    const {nodeOperEvents = []} = selectedModel?.model?.properties;

    nodeOperEvents.map(item => {
      const {callUrl, requestBody} = item;
      // if (item.nodeOperType === 'TAKE_BACK' && item.operEventType === 'BEFORE') {
      //   form.setFieldsValue({callUrl, requestBody})
      // } else if (item.nodeOperType === 'TAKE_BACK' && item.operEventType === 'AFTER') {
      //   form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      // }
      if(titleText === '加签' && item.nodeOperType === 'ADD_SIGN' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      if(titleText === '关闭流程' && item.nodeOperType === 'TERMINATE_PROCESS' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      if(titleText === '委派' && item.nodeOperType === 'DELEGATE' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      if(titleText === '转办' && item.nodeOperType === 'TURN_TO' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      if(titleText === '拿回' && item.nodeOperType === 'TAKE_BACK' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      if(titleText === '退回到上一节点' && item.nodeOperType === 'ROLLBACK_TO_PRE' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      if(titleText === '退回到第一个节点' && item.nodeOperType === 'ROLLBACK_TO_FIRST' && item.operEventType === 'AFTER') {
        form.setFieldsValue({callUrlAfter:callUrl, requestBodyAfter:requestBody})
      }
      return item;
    })

  }, [selectedModel]);

  useEffect(() => {
    if (!nodeConfigVisible) {
      setTimeout(() => {
        handleClose();
      }, 250);
    }
  }, [nodeConfigVisible]);

  const formItemLayout = {
    labelCol: {
      xs: {span: 24},
      sm: {span: 6},
    },
    wrapperCol: {
      xs: {span: 24},
      sm: {span: 18},
    },
  };

  const handleOk = () => {
    form.validateFields((err, values) => {
      if (err) {
        return
      }
      const {callUrlAfter = '', requestBodyAfter = ''} = values;
      const {nodeOperEvents = []} = selectedModel?.model?.properties;
      // if(titleText === '拿回') {
      //   const beforeIndex = _findIndex(nodeOperEvents, (item) => {
      //     return item.nodeOperType === 'TAKE_BACK' && item.operEventType === 'BEFORE';
      //   })
      //   const beforeItem = {
      //     callUrl,
      //     nodeOperType: "TAKE_BACK",
      //     operEventType: "BEFORE",
      //     requestBody,
      //   }

      //   if (beforeIndex === -1) {
      //     nodeOperEvents.push({...beforeItem})
      //   } else {
      //     nodeOperEvents.splice(beforeIndex, 1, {...beforeItem});
      //   }

      //   const afterIndex = _findIndex(nodeOperEvents, (item) => {
      //     return item.nodeOperType === 'TAKE_BACK' && item.operEventType === 'AFTER';
      //   })
      //   const afterItem = {
      //     callUrl: callUrlAfter,
      //     nodeOperType: "TAKE_BACK",
      //     operEventType: "AFTER",
      //     requestBody: requestBodyAfter,
      //   }

      //   if (afterIndex === -1) {
      //     nodeOperEvents.push({...afterItem})
      //   } else {
      //     nodeOperEvents.splice(afterIndex, 1, {...afterItem});
      //   }
      // } else {
        let code = '';
        if(titleText === '加签') {
          code = 'ADD_SIGN';
        } else if(titleText === '关闭流程') {
          code = 'TERMINATE_PROCESS';
        } else if(titleText === '委派') {
          code = 'DELEGATE';
        } else if(titleText === '转办') {
          code = 'TURN_TO';
        } else if(titleText === '拿回') {
          code = 'TAKE_BACK';
        } else if(titleText === '退回到上一节点') {
          code = 'ROLLBACK_TO_PRE';
        } else if(titleText === '退回到第一个节点') {
          code = 'ROLLBACK_TO_FIRST';
        }
        const afterIndex = _findIndex(nodeOperEvents, (item) => {
          return item.nodeOperType === code && item.operEventType === 'AFTER';
        })
        const afterItem = {
          callUrl: callUrlAfter,
          nodeOperType: code,
          operEventType: "AFTER",
          requestBody: requestBodyAfter,
        }

        if (afterIndex === -1) {
          nodeOperEvents.push({...afterItem})
        } else {
          nodeOperEvents.splice(afterIndex, 1, {...afterItem});
        }
      // }

      handleChangeProperties(
        'nodeOperEvents',
        nodeOperEvents,
        selectedModel.model,
        selectedModel.shape,
        false,
      )
      setNodeConfigVisible(false);

    })
  }

  return (
    <Modal
      title={`配置${titleText}后处理`}
      visible={nodeConfigVisible}
      onOk={() => handleOk()}
      onCancel={() => setNodeConfigVisible(false)}
    >

      <div>
        {/* {titleText === '拿回' ? (
          <Form {...formItemLayout}>
            <Form.Item label="预处理">
              {getFieldDecorator('callUrl', {
              rules: [],
            })(
              <Input laceholder='请输入' />
            )}

            </Form.Item>

            <Form.Item label="requestBody">
              {getFieldDecorator('requestBody', {
              rules: [],
            })(
              <TextArea placeholder='请输入' />
            )}

            </Form.Item>
          </Form>
        ) : null} */}

        <Form {...formItemLayout}>
          <Form.Item label="后处理">
            {getFieldDecorator('callUrlAfter', {
              rules: [],
            })(
              <Input laceholder='请输入' />
            )}

          </Form.Item>

          <Form.Item label="requestBody">
            {getFieldDecorator('requestBodyAfter', {
              rules: [],
            })(
              <TextArea laceholder='请输入' />
            )}

          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}

export default Form.create({})(TakeBack);
